﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/lib/css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/themes/base/jquery.ui.all.css" />
    <link href="/lib/css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/plugins/slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="/lib/css/jquery.jdMenu.css" type="text/css" />
    <link href="/plugins/CheckList/ui.dropdownchecklist.themeroller.css" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .ui-layout-center, /* has content-div */ .ui-layout-west, /* has Accordion */ .ui-layout-east, /* has content-div ... */ .ui-layout-east .ui-layout-content
        {
            /* content-div has Accordion */
            padding: 0;
            overflow: hidden;
        }
        .ui-layout-center P.ui-layout-content
        {
            line-height: 1.4em;
            margin: 0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4
        {
            /* Headers & Footer in Center & East panes */
            font-size: 1.1em;
            background: #EEF;
            border: 1px solid #BBB;
            border-width: 0 0 1px;
            padding: 7px 10px;
            margin: 0;
        }
        .ui-layout-east h4
        {
            /* Footer in East-pane */
            font-size: 0.9em;
            font-weight: normal;
            border-width: 1px 0 0;
        }
        .menuContainerJSListBox
        {
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            overflow: auto;
        }
        .DCTextClass
        {
            margin-top:10px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 20px;
        }
    </style>
    <!-- REQUIRED scripts for layout widget -->
    <script src="/lib/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="/lib/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
    <script src="/plugins/globalize.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/themeswitchertool.js"></script>
    <script type="text/javascript" src="/lib/js/debug.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.positionBy.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.jdMenu.js"></script>
    <script src="/lib/js/jquery.event.drag-2.0.min.js"></script>
    <script src="/plugins/slick.editors.js"></script>
    <script src="/plugins/slick.core.js"></script>
    <script src="/plugins/slick.checkboxselectcolumn.js"></script>
    <script src="/plugins/slick.autotooltips.js"></script>
    <script src="/plugins/slick.cellrangedecorator.js"></script>
    <script src="/plugins/slick.cellrangeselector.js"></script>
    <script src="/plugins/slick.cellcopymanager.js"></script>
    <script src="/plugins/slick.cellselectionmodel.js"></script>
    <script src="/plugins/slick.rowselectionmodel.js"></script>
    <script src="/plugins/slick.formatters.js"></script>
    <script src="/plugins/slick.grid.js"></script>
    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/plugins/surge.core.js" type="text/javascript"></script>
    <script src="/plugins/surge.slickGrid.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-inherit.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-listbox.js" type="text/javascript"></script>
    <script src="/plugins/CheckList/ui.dropdownchecklist.js" type="text/javascript"></script>
    <script type="text/javascript">
    var myLayout;
    var mysupLayout;
        $(document).ready(function () {

        //loadFrm("/page/userManagement.htm");

            myLayout = $('body').layout({
                west__size: 234
		, east__size: 300
                // RESIZE Accordion widget when panes resize
		, west__onresize: $.layout.callbacks.resizePaneAccordions
		, east__onresize: $.layout.callbacks.resizePaneAccordions
            });

            mysupLayout = $('#mainFrame').layout({
                center__paneSelector:	".inner-center" 
                , west__paneSelector:		".inner-west"
                ,west__size: '40%' 
                ,south__size:'50%'
                });
            
            $('ul.dropdown').jdMenu();
            // ACCORDION - in the West pane
            $("#accordion1").accordion({ fillSpace: true });

            // ACCORDION - in the East pane - in a 'content-div'
            $("#accordion2").accordion({
                fillSpace: true
		, active: 1
            });


            // THEME SWITCHER
            addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
            // if a new theme is applied, it could change the height of some content,
            // so call resizeAll to 'correct' any header/footer heights affected
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
            setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */
            $(".toolbarCommand button:first").button({
                 
                icons: {
                    primary: "ui-icon-plusthick"
                },
            }).next().button({
                icons: {
                    primary: "ui-icon-gear"
                }
            }).next().button({
                icons: {
                    primary: "ui-icon-minusthick"
                    
                }
            });
            
            window.listBoxAllItems = new JSListBox({'containerSelector':'ListBoxCustomerItems'});
			
			var allItems = [];
			allItems.push(new ProductListBoxItem("C/C++"));
			allItems.push(new ProductListBoxItem("Java"));
			allItems.push(new ProductListBoxItem("JavaScript"));
			allItems.push(new ProductListBoxItem("C#"));
			allItems.push(new ProductListBoxItem("Python"));
			allItems.push(new ProductListBoxItem("Ruby"));
			
			window.listBoxAllItems.addItems(allItems);
            
        });
        function loadFrm(url){

            $.get(url, function(content){

            $('#mainFrame').html(content);   

            });
        }
        
        
        var ProductListBoxItem = JSListBox.Item.extend({

			text: "",
			
			init: function(text) {
				this.text = text;
			},

			render: function() {
				return '<a href="#">' + this.text + '</a>';
			},
			
			onClick: function() {
				var item = new JSListBox.Item();
				item.value = this.text + " item clicked.";
				//alert(item.value);
			},
			
			onDblClick: function() {
				var item = new JSListBox.Item();
				item.value = this.text + " item double clicked.";
				item.enabled = false;
				//alert(item.value);
			}
			
		});
        
       
       $(function() {
		$("#Options").dropdownchecklist();
        
           
	});
    </script>
</head>
<body>
    <div class="ui-layout-north ui-widget-content" style="display: none;">
        <div id="main_header">
            <div class="logo">
                <img src="/images/logoNawa.png" alt="Nawaplastic Co.,Ltd." />
            </div>
            <div style="float: right; margin-right: 160px;">
                <div>
                    <span class="userInfo">User Information</span><br />
                    Logged in as: UserLogin@IP address
                    <br />
                    Role as : UserRole
                </div>
            </div>
        </div>
        <div id="toolbarHolder">
            <div class="ui-state-default ui-corner-all ui-helper-clearfix">
                <ul id="main-menu" class="jd_menu dropdown ui-widget-header" onmouseover="myLayout.allowOverflow('north')"
                    onmouseout="myLayout.resetOverflow(this)">
                    <li>My first item</li>
                    <li><a href="#">Search Engines &raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="http://www.google.com" target="_blank">Google</a></li>
                            <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
                            <li><a href="http://www.altavista.com" target="_blank">AltaVista</a></li>
                            <li><a href="http://jdsharp.us">Go Link &raquo;</a>
                                <ul class="ui-state-default">
                                    <li><a href="http://www.google.com" target="_blank">Google</a></li>
                                    <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
                                    <li><a href="http://www.altavista.com" target="_blank">AltaVista</a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="accessible">Search Engines &raquo;</a>
                                <ul class="ui-state-default">
                                    <li><a href="http://www.google.com" target="_blank">Google</a></li>
                                    <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
                                    <li><a href="http://www.altavista.com" target="_blank">AltaVista</a></li>
                                </ul>
                            </li>
                            <li class="accessible"><a href="#">Search Engines &raquo;</a>
                                <ul class="ui-state-default">
                                    <li><a href="http://www.google.com" target="_blank">Google</a></li>
                                    <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
                                    <li><a href="http://www.altavista.com" target="_blank">AltaVista</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#" class="accessible">Admin Tools</a>
                        <ul class="ui-state-default">
                            <li>User Manager <a href="javascript:loadFrm('/page/login.htm')"></a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sample Top Level Element</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="MessageBar" class="ui-layout-south ui-widget-content ui-state-error" style="display: none;">
        Message Bar
    </div>
    <div id="mainFrame" class="ui-layout-center" width="100%" height="600" frameborder="0"
        scrolling="auto">
        <div class="inner-center">
            <div style="height: 20px;"></div>
            <div class="ui-widget ui-widget-content ui-corner-all" style="width: 50%; height:88%; margin-left: 50px; overflow:auto;">
                <div class="ui-widget-header" style="width: 99%;">
                    Product:
                </div>
                <ul>
                    <li class="ui-menu-item">
                        <div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="">
                            <input type="checkbox" tabindex="0" class="active" id="ddcl-Options-i0" index="0"
                                value="A regular option"><label for="ddcl-Options-i0" class="ui-dropdownchecklist-text"
                                    style="cursor: default;">A regular option</label></div>
                    </li>
                    <li class="ui-menu-item">
                        <div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="">
                            <input type="checkbox" tabindex="0" class="active" id="Checkbox1" index="0" value="A regular option"><label
                                for="ddcl-Options-i0" class="ui-dropdownchecklist-text" style="cursor: default;">kkk</label></div>
                    </li>
                    <li class="ui-menu-item">
                        <div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="">
                            <input type="checkbox" tabindex="0" class="active" id="Checkbox2" index="0" value="A regular option"><label
                                for="ddcl-Options-i0" class="ui-dropdownchecklist-text" style="cursor: default;">hhh</label></div>
                    </li>
                </ul>
            </div>
            
        </div>
        <div class="inner-west">
            <div class="DCTextClass ">
                DC :
                <input id="TextDCtex" type="text" class="ui-widget ui-widget-content ui-corner-all ui-menu-item" />
            </div>
            <div id="ListBoxCustomerItems" style="height: 80%; " >
            </div>
        </div>
        <div class="ui-layout-south">
            
            <div id="CustomerProductGrid" style="width: 100%; height: 300px;">
                </div>
            </div>
    </div>
    <div class="ui-layout-west" style="display: none;">
        <h3 class="ui-widget-header">
            Navigation</h3>
        <div class="ui-layout-content">
            <div id="accordion1" class="basic">
                <h3>
                    <a href="#">Section 1</a></h3>
                <div>
                    <h5>
                        West Pane</h5>
                    <p>
                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
                        Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
                    <p>
                        Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
                        Vestibulum a velit eu ante scelerisque vulputate.</p>
                </div>
                <h3>
                    <a href="#">Section 2</a></h3>
                <div>
                    <h5>
                        Sed Non Urna</h5>
                    <p>
                        Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit,
                        dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus
                        libero ac justo.</p>
                    <p>
                        Vivamus non quam. In suscipit faucibus urna.</p>
                </div>
                <h3>
                    <a href="#">Section 3</a></h3>
                <div>
                    <p>
                        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
                        pellentesque purus in massa. Aenean in pede.</p>
                    <p>
                        Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna
                        quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                    <ul>
                        <li>List item one</li>
                        <li>List item two</li>
                        <li>List item three</li>
                    </ul>
                </div>
                <h3>
                    <a href="#">Section 4</a></h3>
                <div>
                    <p>
                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada
                        fames ac turpis egestas.</p>
                    <p>
                        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                        Curae; Aenean lacinia mauris vel est.</p>
                    <p>
                        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
                        aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
